<template>
  <view class="points-mall-page">
    <!-- <view class="points-mall-head">
      <view class="points-number">积分 550</view>
      <view class="points-order" @click="goToOrderList">
        <image src="/static/images/record.png" class="record-icon" mode="aspectFit" />
        <text class="points-order-text">订单</text>
      </view>
    </view> -->
    <!-- 每日秒杀 -->
    <view v-if="showSeckill" class="seckill-list">
      <view class="seckill-list-title">
        <text>每日秒杀</text>
        <uni-icons type="closeempty" color="rgba(255,255,255,0.5)" size="20" @click="showSeckill=false"></uni-icons>
      </view>
      <view class="seckill-list-wrap">
        <view v-for="(item,index) in 4" :key="index" class="seckill-list-item" @click="clickCategory(item)">
          <image src="https://static.lixingpt.com/6e3a77f0-22b8-49a9-af89-6f4a39c719d4.png" class="seckill-img" mode="aspectFit" />
          <view class="seckill-price">¥<text style="font-size: 44rpx;">255</text>起</view>
          <view class="seckill-tag">热销爆款</view>
        </view>
      </view>
    </view>
    <view class="good-list-main">
      <!-- 分类 -->
      <view class="category-list">
        <view v-for="(item,index) in categoryList" :key="index" class="category-list-item" @click="clickCategory(item)">
          <image :src="item.value" class="category-icon" mode="aspectFit" />
          <view class="category-text">{{item.label}}</view>
        </view>
      </view>
      <view class="good-list">
        <!-- 瀑布流商品展示 -->
        <view class="waterfall-container">
          <view class="waterfall-column">
            <view class="good-item" v-for="(item, index) in goodsList" :key="index" v-if="index % 2 === 0" @click="goToGoodDetail(item)">
              <view class="good-img">
                <image :src="item.mainPic" mode="aspectFill" />
              </view>
              <view class="good-info">
                <text class="good-name">{{item.name}}</text>
                <!-- <text class="good-sales">{{item.sales}}</text> -->
                <view class="points-price">
                  <text class="points-text">{{item.price * 100}}积分</text>
                  <text class="good-sales">已兑{{item.alreadyBuyGoodsCount}}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="waterfall-column">
            <view class="good-item" v-for="(item, index) in goodsList" :key="index" v-if="index % 2 === 1" @click="goToGoodDetail(item)">
              <view class="good-img">
                <image :src="item.mainPic" mode="aspectFill" />
              </view>
              <view class="good-info">
                <text class="good-name">{{item.name}}</text>
                <!-- <text class="good-sales">{{item.sales}}</text> -->
                <view class="points-price">
                  <text class="points-text">{{item.price * 100}}积分</text>
                  <text class="good-sales">已兑{{item.alreadyBuyGoodsCount}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height:120rpx"></view>
    <!-- 底部导航栏 -->
    <smart-tabbar></smart-tabbar>
  </view>
</template>

<script>
import SmartTabbar from '@/components/smart-tabbar/index.vue'
import { getcategoryList, getpurchaseList } from '@/api/goodDetail.js'
export default {
  components: {
    SmartTabbar
  },
  data() {
    return {
      showSeckill: true,
      categoryList: [],
      goodsList: [
        {
          id: 1,
          name: '奥妙除菌除螨洗衣液1kg/瓶起',
          imgUrl: '/static/images/wsj.png',
          points: 79,
          sales: '近期已兑4千件'
        },
        {
          id: 2,
          name: '鱼米之湘鱼蛋',
          imgUrl: '/static/images/31.png',
          points: 9,
          sales: '已兑451'
        },
        {
          id: 2,
          name: '鱼米之湘鱼蛋',
          imgUrl: '/static/images/31.png',
          points: 9,
          sales: '已兑451'
        },
        {
          id: 1,
          name: '奥妙除菌除螨洗衣液1kg/瓶起',
          imgUrl: '/static/images/wsj.png',
          points: 79,
          sales: '近期已兑4千件'
        }
      ]
    }
  },
  
  onShow() {},
  onLoad() {
    this.getcategoryList()
  },
  methods: {
    goToOrderList() {
      uni.navigateTo({
          url: '/pagesOne/orderList/orderList'
      });
    },
    // 团购分类
    getcategoryList() {
      getcategoryList().then(res => {
        if (res.code == 0) {
          this.categoryList = res.data
          this.getpurchaseList(this.categoryList[0].label)
        }
      })
    },
    // 团购列表
    getpurchaseList(category) {
      getpurchaseList({
        page: 1,
        rows: 10,
        category: category,
        key: ''
      }).then(res => {
        if (res.code == 0) {
          this.goodsList = res.data.records
        }
      })
    },
    clickCategory(item) {
      this.getpurchaseList(item.label)
    },
    goToGoodDetail(item) {
      console.log('跳转详情页')
      uni.navigateTo({
          url: '/pagesThree/goodDetail/index?id=' + item.id
      });
    }
  }
}
</script>

<style scoped>
view {
  box-sizing: border-box;
}
.points-price {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.seckill-list {
  width: 750rpx;
  height: 408rpx;
  background: linear-gradient( 180deg, #3BB7AB 0%, rgba(68,164,155,0.6) 100%), #FFFFFF;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 14rpx 10rpx;
}
.seckill-list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
.seckill-price {
  font-size: 12rpx;
  color: #000000;
  text-align: center;
}
.seckill-tag {
  width: 90rpx;
  height: 32rpx;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 1rpx solid #419991;
  font-size: 20rpx;
  color: #409890;
  text-align: center;
  margin: 0 auto;
}
.seckill-list-title text {
  font-size: 40rpx;
  color: #FFFFFF;
}
.seckill-list-wrap {
  display: flex;
  gap: 6rpx;
}
.seckill-list-item {
  background: #FFFFFF;
  flex: 1;
  background: #FFFFFF;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding-bottom: 22rpx;
}
.seckill-img {
  width: 100%;
  height: 196rpx;
}
.points-number {
  width: 148rpx;
  height: 60rpx;
  background: #F7F7F7;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  font-size: 28rpx;
  color: #777777;
  line-height: 48rpx;
}
.points-order {
  width: 140rpx;
  height: 60rpx;
  background: #F7F7F7;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.points-order-text {
  font-weight: 500;
  font-size: 28rpx;
  color: #777777;
}
.record-icon {
  width: 36rpx;
  height: 36rpx;
}
.points-mall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 34rpx;
}
.good-list-main {
  padding: 12rpx 20rpx;
}
.category-list {
  display: flex;
  /* margin-bottom: 44rpx; */
}
.category-list-item {
  flex: 1;
}
.category-text {
  width: 100%;
  text-align: center;
  font-size: 24rpx;
  color: #000000;
}
.category-icon {
  width: 100%;
  height: 84rpx;
  margin-right: 16rpx;
}

/* 瀑布流样式 */
.waterfall-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.waterfall-column {
  width: 48%;
}
.good-item {
  margin-bottom: 20rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0rpx 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.good-img {
  width: 100%;
  padding-top: 100%;
  position: relative;
  background: #F5F5F5;
}
.good-img image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.good-info {
  padding: 16rpx;
}
.good-name {
  font-size: 26rpx;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8rpx;
}
.good-sales {
  font-size: 22rpx;
  color: #999999;
  display: block;
  margin-left: 4rpx;
}
.good-points {
  background: linear-gradient(135deg, #FF6B2A 0%, #FF8500 100%);
  border-radius: 12rpx;
  padding: 6rpx 12rpx;
  display: inline-block;
}
.points-text {
  font-size: 24rpx;
  color: #FF3705;
  font-weight: bold;
}
</style>